<template>
    <div class="popout-content">
        <transition name="fade">
            <div class="popout" v-show="alert_shot.show">
                <div class="content-mnemonic">
                    <div class="mnemonic-iconfont"><img src="@/assets/img/photo.png" alt=""></div>
                    <div class="mnemonic-title">{{ alert_shot.title || $t('m.component.alert_shot.listTitle') }}</div>
                </div>
                <div class="popout-hint">{{ alert_shot.tip || $t('m.component.alert_shot.prompt[0]') }}</div>
                <div class="content-know" @click="aAlert_shot({show: false})">{{ alert_shot.confirm || $t('m.component.alert_shot.prompt[1]') }}</div>
            </div>
        </transition>
        <transition name="bg">
            <div class="bg"  v-show="alert_shot.show"></div>
        </transition>
    </div>
</template>
<script>
    export default {
        name: 'alert_shot',
    }
</script>
<style scoped>
    @import "../../assets/css/popout.css";

    .fade-enter-active, .fade-leave-active {
        transition: all 1s;
    }

    .fade-enter, .fade-leave-to {
        transform: translateY(10rem);
    }

    .bg-enter-active, .bg-leave-active {
        transition: all 1s;
    }

    .bg-enter, .bg-leave-to {
        opacity: 0;
    }
</style>